<template>
	<view class="main">
		<u-navbar :is-back="false" :border-bottom="false" title-color="#ffffff" title="人民放" :background="background">
		</u-navbar>
		<view class="header">
			<view class="top">
				<view class="dj" @click="openMenu">
					<backAins :type='1' v-if="fros.sin==1"></backAins>
					<view class="menu"></view>
				</view>

				<view class="share">
					<!-- #ifdef MP-WEIXIN -->
					<button type="default" open-type="share"></button>
					<!-- #endif -->
					<!-- #ifdef APP-PLUS -->
					<p @click="yshare"></p>
					<!-- #endif -->
				</view>

			</view>
			<view class="btm">
				<view class="avatar">
					<image :src="userInfo.ico" mode=""></image>
					<view class="ico"></view>
				</view>
				<view class="info">
					<view class="title">
						<view class="name">{{userInfo.nickname}}</view>
						<!-- <text class="icon" v-show="userInfo.level"></text>
						<text v-show="userInfo.level">{{userInfo.level}}</text> -->
					</view>
					<view class="des">个人介绍：{{userInfo.introduce||'暂无'}}</view>
				</view>
			</view>
		</view>
		<view class="Tag">
			<!-- <view class="item">
				<view class="title">{{dianYingNum}}</view>
				<view class="des">组织点映</view>
			</view> -->
			<view class="item">
				<view class="title">{{baoChangNum}}</view>
				<view class="des">组织包场</view>
			</view>
			<!-- <view class="item">
				<view class="title">{{guanYingNum}}</view>
				<view class="des">观影</view>
			</view> -->
			<view class="item">
				<view class="title">{{list1.length || 0}}</view>
				<view class="des">观影报告</view>
			</view>
			<view class="item">
				<view class="title">{{inviteNum}}</view>
				<view class="des">邀清好友</view>
			</view>
			<!-- <view class="item">
				<view class="title">{{invitePayNum||0}}</view>
				<view class="des">好友购票</view>
			</view> -->

		</view>
		<view class="tab_nav">
			<view class="item" :class="{active:active==0}" @click="TabClick(0)">包场历史</view>
			<view class="item" :class="{active:active==1}" @click="TabClick(1)">观影报告</view>
			<!-- <view class="item" :class="{active:active==1}" @click="TabClick(1)">观影足迹</view> -->
			<!-- <view class="item" :class="{active:active==2}" @click="TabClick(2)">点映场</view> -->
		</view>
		<view class="content" v-show="active==0">
			<view class="item" v-for="item in list" :key="item.id">
				<view class="cover">
					<image :src="item.icoImg" mode=""></image>
				</view>
				<view class="cont">
					<view class="left">
						<view class="title">{{item.title}}</view>
						<!-- <view class="rate">
							<u-rate size="20" disabled gutter='5' :count="count" v-model="value" active-color="#FFD100" inactive-color="#FFD100"></u-rate>
							<text>4.0</text>
						</view> -->
						<view class="des">
							包场类型：{{item.type==1?'影院包场':item.type==2?'私人定制':'单位定制'}}
						</view>
						<view class="des" v-if="item.type==1">
							影院名称：{{item.cinemaName}}人
						</view>
						<view class="des" v-if="item.type==1">
							影厅名称：{{item.hallName}}人
						</view>
						<view class="des">
							观影人数：{{item.num}}人
						</view>
						<view class="des" v-if="item.company">
							单位名称：{{item.company}}
						</view>
						<view class="des">
							包场时间：{{item.starttime}}
						</view>
					</view>
					<view class="right">
						<view class="ico"></view>
						<view class="" v-if="item.admStatus==2">
							<view class="btn active" v-if="item.admImgs">已评论</view>
						</view>
						<view class="" v-else-if="item.admStatus==3">
							<view class="btn">审核中</view>
						</view>
						<view class="" v-else>
							<view class="btn active" v-if="item.admImgs">已评论</view>
							<view class="btn" v-if="!item.admImgs" @click="toping(item)">去评论</view>
						</view>


					</view>
				</view>
			</view>

		</view>
		<!-- <view class="content" v-show="active==1">
			<view class="item" v-for="(item,index) in list" :key="index">
				<view class="cover">
					<image :src="item.icoImg" mode=""></image>
				</view>
				<view class="cont">
					<view class="left">
						<view class="title">{{item.mvName}}</view>
						<view class="rate"> -->
		<!-- <u-rate size="20" disabled gutter='5' :count="count" v-model="item.star" active-color="#FFD100" inactive-color="#FFD100"></u-rate> -->

		<!-- <u-rate active-color="#FFD100" size="20" :current="item.score*0.5" :disabled="true">
							</u-rate>
							<text>{{item.score}}</text>
						</view>
						<view class="des">
							导演：{{item.director}}
						</view>
						<view class="des">
							片长：{{item.duration}}分钟
						</view>
						<view class="des" v-if="item.company">
							观影时间：{{item.time}}
						</view>
						<view class="des">
							观影影院：{{item.mcName}}
						</view>

					</view>
					<view class="right">
						<view class="ico"></view> -->
		<!-- <view class="btn active">已评论</view> -->
		<!-- </view>
				</view>
			</view>
		</view> -->


		<view class="content" v-show="active==1">
			<view class="item" v-for="(item,index) in list1" :key="index" @tap="goPhotoDetails(item)">
				<view class="cover">
					<image :src="item.ypCoverImage" mode=""></image>
				</view>
				<view class="cont">
					<view class="left">
						<view class="title">{{item.ypname}}</view>

						<view class="des">
							省市区：{{item.province}} {{item.city}} {{item.area}}
						</view>
						<view class="des">
							影院名称：{{item.cinemaName}}
						</view>
						<view class="des" v-if="item.company">
							观影人数：{{item.peopleNumb}}
						</view>
						<view class="des">
							单位名称：{{item.unit}}
						</view>
						<view class="des">
							包场时间：{{item.bgTime}}
						</view>

					</view>
					<view class="right">
						<!-- <view class="ico"></view> -->
						<!-- <view class="btn active">已评论</view> -->
					</view>
				</view>
			</view>
		</view>

		<view class="content" v-show="active==2">
			<view class="item" v-for="item in list1" :key="item.id">
				<view class="cover">
					<image :src="item.icoImg" mode=""></image>
				</view>
				<view class="cont">
					<view class="left">
						<view class="title">{{item.title}}</view>
						<!-- <view class="rate">
							<u-rate size="20" disabled gutter='5' :count="count" v-model="value" active-color="#FFD100" inactive-color="#FFD100"></u-rate>
							<text>4.0</text>
						</view> -->
						<view class="des">
							影院：{{item.cinemaName}}
						</view>
						<view class="des">
							影厅：{{item.hallName}}
						</view>
						<view class="des">
							观影时间：{{item.starttime}}
						</view>
						<view class="des">
							影院地址：{{item.cinemaAddress}}
						</view>
					</view>
					<view class="right">

						<view class="ico" v-if="item.isend"></view>
						<block v-else>
							<view class="type" v-if="item.maxNum==item.payNum!=0">
								已满场
							</view>
							<view v-else class="type">正在点映</view>
						</block>

						<view v-if="item.isend">
							<view class="" v-if="item.admStatus==2">
								<view class="btn active" v-if="item.admImgs">已评论</view>
							</view>
							<view class="" v-else-if="item.admStatus==3">
								<view class="btn" @click="toping(item)">修改评论</view>
							</view>
							<view class="" v-else>
								<view class="btn active" v-if="item.admImgs">已评论</view>
								<view class="btn" v-if="!item.admImgs" @click="toping(item)">去评论</view>
							</view>
						</view>
						<view v-else class="btns">
							<u-button v-if="item.maxNum!=item.payNum" type="error" @click="goToPage(item.id)">分享
							</u-button>
						</view>
					</view>
				</view>
			</view>

		</view>
		<view class="loadmore">
			<u-loadmore :status="status" />
		</view>
		<backAins :type="11" v-if="fros.sin==1"></backAins>
		<Nav :current='navActive'>
		</Nav>
		<u-popup v-model="show" length="60%">
			<view class="menu_cont">
				<view class="info">
					<view class="name">{{userInfo.nickname}}</view>
					<!-- <view class="des" v-show="userInfo.level">{{userInfo.level}}</view> -->
				</view>
				<view class="m_nav">
					<view class="item" @click="ToPage('/PersonalInfo/index')">个人资料</view>
					<view class="item" @click="ToPage('/Credits/index?credits='+userInfo.credits)">我的积分
						({{userInfo.credits}})</view>
					<view class="item" @click="ToPage('/Order/list',userInfo.id)">
						<backAins :type="3" v-if="fros.mvBaochang!=0||fros.spOrderList!=0"></backAins>
						我的订单
					</view>
					<!-- <view class="item" @click="ToPage('/Clickapply/index')">点映申请</view> -->
					<view class="item" @click="ToPage('/CharteredApply/index')">
						包场申请
					</view>
					<view class="item" @click="ToPage('/CharterDeclarationOrder/CharterDeclarationOrderList')">
						<backAins :type="4" v-if="fros.mvApt!=0||fros.mvDec!=0"></backAins>包场活动单
					</view>
					<view class="item" @click="ToPage('/Viewing/index',userInfo.id)">
						<backAins :type="3" v-if="fros.gyReport!=0"></backAins>观影报告
					</view>
					<view class="item" @click="ToPage('/CharterDeclarationOrder/Subsidy',userInfo.id)">我的补贴</view>
					<!-- <view class="item" @click="ToPage('/MyFocus/index',userInfo.id)">我的关注</view> -->
					<view class="item" @click="ToPage('/WantSee/index',userInfo.id)">想看的电影</view>
					<!-- <view class="item">账号安全</view> -->
					<view class="item" @click="ToPage('/Help/index',userInfo.id)">帮助与客服</view>
					<view class="item" @click="ToPage('/Inbox/Inbox',userInfo.id)">
						<backAins :type="5" v-if="fros.uniPushUser!=0"></backAins>收件箱
					</view>
					<!-- #ifdef MP-WEIXIN -->
					<view class="item" v-if="showApple==true" @click="ToPage('/H5/H5Ios')">App下载</view>
					<view class="item" v-if="showApple==false" @click="ToPage('/H5/H5and')">App下载</view>
					<!-- #endif -->
					<view class="item" @click="toPage('/About/index',1)">关于我们</view>
					<view class="item" @click="gobaclk()">退出登录</view>
				</view>
			</view>
		</u-popup>

		<u-popup v-model="shows" closeable width="80%" length="80%" border-radius="15" mode="bottom"
			:mask-close-able="false">
			<view class="content">
				<view class="title">
					添加评论
				</view>
				<view class="forms">
					<view class="lable">
						描述
					</view>
					<u-input v-model="froms.admTexts" type="textarea" :auto-height="false" :height="100"
						:border="true" />
					<view class="lable">
						上传图片
					</view>
					<u-upload v-if="shows" ref="uUpload" :before-upload="beforeUpload" :file-list="fileLists"
						@on-success="icoSuccess" :header="header" :action="action" @on-remove="delimgs">
					</u-upload>
				</view>
				<view class="bottm" @click="tijiao()">
					确定提交
				</view>
			</view>
		</u-popup>
		<u-toast ref="uToast" />
	</view>

</template>

<script>
	import backAins from '../../component/backAins.vue'
	import Nav from '../../component/Nav.vue'
	export default {
		components: {
			Nav,
			backAins
		},
		data() {
			return {
				action: 'http://www.example.com/upload',
				userInfo: {},
				show: false,
				showApple: false,
				active: 0,
				navActive: 1,
				background: {
					background: '#EF5737'
				},
				status: '',
				uid: '',
				count: 5,
				pageNum: 1, //当前页码
				pageSize: 10, //每页数量
				total: 0, //数据总量
				list: [], //电影列表
				list1: [], //观影报告列表 
				baoChangNum: 0,
				dianYingNum: 0,
				guanYingNum: 0,
				inviteNum: 0,
				invitePayNum: 0,
				shows: false,
				froms: {},
				fileLists: [],
				header: '',
				icon: '',
				fileList: [],
				fros: {
					gyReport: 0,
					mvApt: 0,
					mvBaochang: 0,
					mvDec: 0,
					spOrderList: 0,
					uniPushUser: 0,
					sin: 0
				}
			}
		},
		onLoad(e) {
			this.add()
			if (e.userId) {
				uni.setStorageSync('InvitedCode', e.userId)
			}
		},
		onShow() {
			try {
				const value = uni.getStorageSync('userInfo');
				const token = uni.getStorageSync('token');
				this.header = {
					"token": token
				}
				if (value) {
					this.uid = value.id
				}
			} catch (e) {
				// error
			}
			this.userInfo = uni.getStorageSync('userInfo')
			this.action = this.$api.fileUpload
			this.list = [];
			this.list1 = [];
			this.getredin()
		},
		onPullDownRefresh() {
			this.userInfo = uni.getStorageSync('userInfo')
			this.list = [];
			this.list1 = [];
			this.pageNum = 1
			this.getredin()

		},
		onReachBottom() {
			if (Math.ceil(this.total / this.pageSize) > this.pageNum) {
				this.pageNum = this.pageNum + 1
				if (this.active == 0) {
					this.CharteredList()
				}
				if (this.active == 1) {
					this.MySeeList()
				}
				if (this.active == 2) {
					this.InitiateList()
				}
			} else {

			}
		},


		methods: {
			add() {
				// 先判断 系统版本
				var that = this;
				uni.getSystemInfo({
					success: function(res) {
						var sytem = res.system.substring(0, 3)
						if (sytem == 'iOS') {
							that.showApple = true
						} else {
							that.showApple = false
						}
					}
				});
			},

			getredin() {
				uni.stopPullDownRefresh();
				this.status = 'loading'
				this.$http({
					url: this.$api.selectIsRead,
					method: 'GET',
					hideLoading: true,
					data: {
						uid: this.uid,
					},
					success: res => {
						this.fros.gyReport = res.data.gyReport
						this.fros.mvApt = res.data.mvApt
						this.fros.mvDec = res.data.mvDec
						this.fros.mvBaochang = res.data.mvBaochang
						this.fros.spOrderList = res.data.spOrderList
						this.fros.uniPushUser = res.data.uniPushUser
						if (res.data.gyReport == 0 && res.data.mvApt == 0 && res.data.mvDec == 0 && res.data
							.mvBaochang == 0 && res.data.spOrderList == 0 && res.data.uniPushUser == 0) {
							this.fros.sin = 2
						} else {
							this.fros.sin = 1
						}
					},
				})
			},
			// 跳转包场照片详情页
			goPhotoDetails(item) {
				uni.navigateTo({
					url: '/pages/FilmReport/privatePhotos?id=' + item.id
				})
			},
			toping(e) {
				this.shows = true
				this.froms = Object.assign({}, e);
				this.fileLists = []
			},

			beforeUpload() {

			},
			icoSuccess(e) {
				this.fileList.push(e.message)
				console.log("添加后--------", this.fileList);
			},
			delimgs(is) {
				console.log("删除--------", is);

				// arr.splice(ind,1);
				this.fileList.splice(is, 1)
				console.log("删除后--------", this.fileList);
			},
			tijiao() {
				var files = this.$refs.uUpload.lists.filter(val => {
					return val.progress == 100;
				})
				console.log("files----------", files)


				if (this.fileList.length <= 0) {
					this.$refs.uToast.show({
						title: '请上传图片',
						type: 'waring'
					})
					return
				}
				if (!this.froms.admTexts) {
					this.$refs.uToast.show({
						title: '请填写描述信息',
						type: 'waring'
					})
					return
				}
				this.froms.admImgs = this.fileList.toString();
				this.froms.admStatus = 3
				this.$http({
					url: this.active == 0 ? this.$api.baochangCreateObj : this.$api.dianyingCreateObj,
					method: 'POST',
					hideLoading: true,
					data: this.froms,
					success: res => {
						if (res.data) {
							this.shows = false
							this.froms = {}
							this.fileList = []
						}
						this.getUserInfo()

						this.$refs.uToast.show({
							title: res.message,
							type: 'success'
						})
					},
					complete: e => {
						uni.stopPullDownRefresh();
					}
				})
			},

			goToPage(e) {
				const value = uni.getStorageSync('userInfo')
				uni.navigateTo({
					url: `/pages/SessionDetail/index?userId=${value.id}&dyId=${e}`
				})
			},
			//分享
			yshare() {
				console.log('App点击分享-----------------', this.userInfo.ico)
				// #ifdef APP-PLUS
				uni.share({
					provider: 'weixin',
					scene: "WXSceneSession",
					type: 5,
					imageUrl: this.userInfo.ico,
					title: this.userInfo.nickname,
					miniProgram: {
						id: 'gh_55af37f30d9b',
						path: `/pages/Chartered/index?userId=${this.userInfo.id}`,
						type: 0,
						webUrl: 'http://uniapp.dcloud.io'
					},
					success: ret => {
						console.log(JSON.stringify(ret));
					},
					fail: (err) => {
						console.log('分享失败--------------', err)
					}
				});
				// #endif
			},
			share(detail) {
				// #ifdef APP-PLUS
				try {
					const value = uni.getStorageSync('userInfo');
					uni.share({
						provider: 'weixin',
						scene: "WXSceneSession",
						type: 5,
						imageUrl: detail.icoImg,
						title: detail.title,
						miniProgram: {
							id: 'gh_55af37f30d9b',
							path: `/pages/SessionDetail/index?dyId=${detail.id}&userId=${value.id}`,
							type: 0,
							webUrl: 'http://uniapp.dcloud.io'
						},
						success: ret => {
							console.log(JSON.stringify(ret));
						},
						fail: (err) => {
							console.log('分享失败--------------', err)
						}
					});
				} catch (e) {

				}
				// #endif
			},
			// 统计
			getMyData() {
				this.status = 'loading'
				this.$http({
					url: this.$api.getMyData,
					method: 'GET',
					hideLoading: true,
					data: {
						uid: this.userInfo.id
					},
					success: res => {
						console.log('统计---------', res)
						this.baoChangNum = res.data.baoChangNum
						this.dianYingNum = res.data.dianYingNum
						this.guanYingNum = res.data.guanYingNum
						this.inviteNum = res.data.inviteNum
						this.invitePayNum = res.data.invitePayNum
					},
					complete: e => {
						uni.stopPullDownRefresh();
					}
				})
			},
			gobaclk() {
				console.log("a")
				uni.removeStorage({
					key: 'userInfo',
					success: function(res) {
						console.log('success');
						uni.reLaunch({
							url: '/pages/Login/index'
						});

					},
					fail: (err) => {
						console.log('退出失败------', err)
					}
				});
				uni.removeStorageSync('token')
				uni.removeStorageSync('actId')
				uni.removeStorageSync('formData')
				uni.removeStorageSync('appleid')
			},


			// 观影记录
			MySeeList() {
				this.status = 'loading'
				this.$http({
					url: this.$api.getMobilGyList,
					method: 'GET',
					hideLoading: true,
					data: {
						saveFlag: '2',
						userid: this.userInfo.id,
						pageNum: this.pageNum,
						pageSize: this.pageSize
					},
					success: res => {
						console.log(res)
						this.total = Number(res.ext)
						if (Math.ceil(this.total / this.pageSize) <= this.pageNum) {
							this.status = 'nomore'
						} else {
							this.status = 'loadmore'
							this.pageNum = this.pageNum + 1
							this.MySeeList()
						}
						this.list1 = this.list1.concat(res.data)
						this.list1 = this.list1.filter(i => i.auditFlag == 1)

					},
					fail: err => {
						this.status = 'nomore'
					},
					complete: e => {
						uni.stopPullDownRefresh();
						if (!e.code) {
							this.status = 'nomore'
						}
					}
				})
			},
			// 观影报告列表
			CharteredList() {
				// this.list = [{},{},{}]
				this.status = 'loading'
				this.$http({
					url: this.$api.getStatusList,
					method: 'GET',
					hideLoading: true,
					data: {
						type: 1,
						uid: this.userInfo.id,
						pageNum: this.pageNum,
						pageSize: this.pageSize
					},
					success: res => {
						console.log(res)
						this.total = Number(res.ext)

						if (Math.ceil(this.total / this.pageSize) <= this.pageNum) {
							this.status = 'nomore'
						} else {
							this.status = 'loadmore'
						}
						this.list = this.list.concat(res.data)

						console.log(this.list)
					},
					fail: err => {
						this.status = 'nomore'
					},
					complete: e => {
						uni.stopPullDownRefresh();
						if (!e.code) {
							this.status = 'nomore'
						}
					}
				})
			},
			//点映列表
			InitiateList() {
				this.status = 'loading'
				this.$http({
					url: this.$api.dianyinggetStatusList,
					method: 'GET',
					hideLoading: true,
					data: {
						type: 2,
						uid: this.userInfo.id,
						pageNum: this.pageNum,
						pageSize: this.pageSize
					},
					success: res => {
						console.log(res)
						if (res.data) {
							res.data.map(el => {
								var date = el.endtime
								if (new Date(date.replace(/\-/g, "/")).getTime() - new Date()
									.getTime() < 0) {
									el.isend = true
									return el
								} else {
									el.isend = false
									return el
								}

							})
						}
						this.total = Number(res.ext)
						if (Math.ceil(this.total / this.pageSize) <= this.pageNum) {
							this.status = 'nomore'
						} else {
							this.status = 'loadmore'
						}
						this.list = this.list.concat(res.data)
					},
					fail: err => {
						this.status = 'nomore'
					},
					complete: e => {
						uni.stopPullDownRefresh();
						if (!e.code) {
							this.status = 'nomore'
						}
					}
				})
			},
			// 获取用户信息
			getUserInfo() {
				let appleid = uni.getStorageSync('appleid');
				uni.stopPullDownRefresh();
				// if(appleid) {
				// 	return;
				// }
				if (appleid) {
					this.$http({
						url: this.$api.wybGetMvUser,
						method: 'GET',
						hideLoading: true,
						data: {
							appleid: appleid
						},
						success: res => {
							this.userInfo = res.data;
							uni.removeStorageSync('token');
							uni.setStorageSync('token', res.data.token);
							uni.setStorage('userInfo', res.data);
							this.getMyData();
							this.list = []
							this.pageNum = 1
							if (this.active == 0) {
								this.CharteredList()
							}
							// if (this.active == 1) {
							// 	this.MySeeList()
							// }
							if (this.active == 2) {
								this.InitiateList()
							}
							this.MySeeList()
						},
						fail: err => {

						}
					});
					return;
				}



				this.$http({
					url: this.$api.getMvUserDetail,
					method: 'GET',
					hideLoading: true,
					data: {
						id: this.uid
					},
					success: res => {
						this.userInfo = res.data
						console.log('用户信息----------', this.userInfo.credits)
						this.getMyData()
						this.list = []
						this.pageNum = 1
						if (this.active == 0) {
							this.CharteredList()
						}
						// if (this.active == 1) {
						// 	this.MySeeList()
						// }
						if (this.active == 2) {
							this.InitiateList()
						}
						this.MySeeList()

					},
					complete: e => {
						uni.stopPullDownRefresh();
					}
				})
			},
			// 跳转
			ToPage(e, data) {
				this.show = false;
				console.log('点击跳转', e)
				uni.navigateTo({
					url: `/pages${e}?uid=${data}`
				});
			},
			toPage(e, type) {
				uni.navigateTo({
					url: `/pages${e}?type=${type}`
				});
			},
			ToPage1() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			ToDetail(url, type, data = '') {
				if (data.status == 2) {
					uni.navigateTo({
						url: `/pages${url}?type=${type}&id=${data.id}`
					});
				}

			},
			// 打开菜单
			openMenu() {
				this.show = true
			},
			// 切换列表
			TabClick(e) {
				this.active = e
				this.list = []
				this.pageNum = 1
				if (this.active == 0) {
					this.CharteredList()
				}
				if (this.active == 1) {
					this.list1 = [];
					this.MySeeList()
				}
				if (this.active == 2) {
					this.InitiateList()
				}
			},


		}
	}
</script>

<style lang="less" scoped>
	.main {
		height: 100%;
		width: 100%;

		.header {
			// background: linear-gradient(157deg, #EF5737 0%, #EF3C37 100%);
			background: #EF5737;
			padding: 26rpx 36rpx 86rpx 36rpx;

			.top {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.dj {
					width: 44px;
					height: 44px;

					.menu {
						width: 30rpx;
						height: 24rpx;
						background: url(../../static/icon/menu.png)center center no-repeat;
						background-size: 100%;

					}
				}

				.share {
					width: 36rpx;
					height: 38rpx;
					background: url(../../static/icon/share.png)center center no-repeat;
					background-size: 100%;
					position: relative;

					button {
						width: 36rpx;
						height: 38rpx;
						padding: 0;
						opacity: 0;
					}

					p {
						width: 36rpx;
						height: 38rpx;
						padding: 0;
						opacity: 0;
					}
				}
			}

			.btm {
				display: flex;
				align-items: center;
				margin-top: 34rpx;

				.avatar {
					width: 110rpx;
					height: 110rpx;
					position: relative;


					image {
						width: 110rpx;
						height: 110rpx;
						border-radius: 50%;
						background: #fffcfc;
						border: 1px solid #fff;
						box-shadow: 0rpx 4rpx 8rpx 0rpx #F7E6E6;
					}

					.ico {
						border-radius: 50%;
						padding: 15rpx;
						background: #ffffff url(../../static/icon/man.png)center center no-repeat;
						background-size: 18rpx;
						position: absolute;
						right: 5rpx;
						bottom: 5rpx;
					}
				}

				.info {
					margin-left: 16rpx;

					.title {
						display: flex;
						align-items: center;

						.name {
							font-size: 32rpx;
							font-weight: 600;
							color: #FFFFFF;
							line-height: 44rpx;
							letter-spacing: 1rpx;
						}

						.icon {
							width: 28rpx;
							height: 28rpx;
							background: #ffffff url(../../static/icon/member.png)center center no-repeat;
							background-size: 28rpx 26rpx;
							padding: 15rpx;
							border-radius: 50%;
							margin: 0 10rpx 0 20rpx;
						}

						text {
							font-size: 20rpx;
							font-weight: 400;
							color: #FFFFFF;
							line-height: 28rpx;
						}
					}

					.des {
						margin-top: 10rpx;
						font-size: 20rpx;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 28rpx;
					}
				}
			}
		}

		.Tag {
			position: relative;
			top: -48rpx;
			left: 28rpx;
			width: calc(100% - 56rpx);
			padding: 30rpx 38rpx 34rpx 30rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 8rpx 0rpx #F7E6E6;
			border-radius: 16rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.item {
				text-align: center;

				.title {
					font-size: 28rpx;
					font-weight: 600;
					color: #000000;
					line-height: 40rpx;
				}

				.des {
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
					line-height: 34rpx;
				}
			}
		}

		.tab_nav {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 106rpx;

			.item {
				font-size: 28rpx;
				font-weight: 400;
				color: #999990;
				line-height: 40rpx;
				position: relative;
			}

			.active {
				font-weight: 600;
				color: #222222;
			}

			.active::after {
				content: '';
				width: 32rpx;
				height: 6rpx;
				background: #EF3C37;
				border-radius: 3rpx;
				position: absolute;
				left: calc(50% - 16rpx);
				bottom: -8rpx;
			}
		}

		.content {
			.item {
				display: flex;
				align-items: center;
				padding: 10rpx 28rpx;
				margin-top: 14rpx;
				margin-bottom: 30rpx;
				border-radius: 8rpx;
				height: 300rpx;
				box-shadow: 0rpx 4rpx 8rpx 0rpx #e0dbdb;

				.cover {
					height: 250rpx;
					width: 180rpx;
					margin-right: 26rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 16rpx;
					}
				}

				.cont {
					width: calc(100% - 178rpx);
					display: flex;
					height: 95%;
					justify-content: space-between;
					align-items: flex-end;
					position: relative;

					.right {
						.type {
							width: 102rpx;
							position: absolute;
							right: 0;
							top: 0;
							font-size: 22rpx;
							font-weight: 600;
							color: #EF3C37;
							line-height: 32rpx;
						}

						.ico {
							width: 100rpx;
							height: 100rpx;
							background: url(../../static/icon/end.png)center center no-repeat;
							background-size: 100rpx;
							position: absolute;
							right: 0rpx;
							top: 0;
						}

						.btn {
							width: 108rpx;
							height: 48rpx;
							border-radius: 24rpx;
							border: 1rpx solid #EF3C37;
							text-align: center;
							font-size: 20rpx;
							font-weight: 400;
							color: #EF3C37;
							line-height: 48rpx;
							padding: 0 15rpx;
						}

						.btn.active {
							width: 104rpx;
							border: 0;
							background: #CDCDCD;
							color: #FFFFFF;
						}

						.btns {
							/deep/button {
								width: 98rpx;
								height: 48rpx;
								border-radius: 8rpx;
								border: 1rpx solid #EF3C37;
								text-align: center;
								font-size: 20rpx;
								font-weight: 400;
								color: #FFFFFF;
								line-height: 48rpx;
							}
						}
					}

					.left {
						// width: calc(100% - 140rpx);
						display: flex;
						justify-content: space-between;
						height: 100%;
						flex-direction: column;

						.title {
							font-size: 28rpx;
							font-weight: 600;
							color: #000000;
							letter-spacing: 1rpx;
						}

						.rate {
							margin-bottom: 16rpx;

							text {
								font-size: 20rpx;
								font-weight: 600;
								color: #FF9120;
								line-height: 28rpx;
							}
						}

						.des {
							font-size: 20rpx;
							font-weight: 400;
							color: #44444F;
							line-height: 28rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}
				}
			}
		}

		.menu_cont {
			padding: 120rpx 68rpx 0 68rpx;

			.info {
				.name {
					font-size: 40rpx;
					font-weight: 600;
					color: #222222;
					line-height: 56rpx;
				}

				.des {
					background: url(../../static/icon/member.png)left center no-repeat;
					background-size: 28rpx 24rpx;
					padding-left: 34rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #2A303C;
					line-height: 34rpx;
				}
			}

			.m_nav {
				.item {
					background: url(../../static/icon/mico_1.png)left center no-repeat;
					background-size: 32rpx 34rpx;
					padding-left: 64rpx;
					font-size: 28rpx;
					font-weight: 600;
					color: #222222;
					line-height: 40rpx;
					margin-top: 50rpx;
				}

				.item:nth-child(2) {
					// background: url(../../static/icon/mico_2.png)left center no-repeat;
					background-size: 32rpx 34rpx;
				}

				.item:nth-child(3) {
					// background: url(../../static/icon/mico_3.png)left center no-repeat;
					background-size: 32rpx 34rpx;
				}

				.item:nth-child(4) {
					// background: url(../../static/icon/mico_4.png)left center no-repeat;
					background-size: 32rpx 34rpx;
				}

				.item:nth-child(5) {
					// background: url(../../static/icon/mico_5.png)left center no-repeat;
					background-size: 32rpx 34rpx;
				}

				.item:nth-child(6) {
					// background: url(../../static/icon/mico_6.png)left center no-repeat;
					background-size: 32rpx 34rpx;
				}

				.item:nth-child(7) {
					// background: url(../../static/icon/mico_7.png)left center no-repeat;
					background-size: 32rpx 34rpx;
				}

				.item:nth-child(8) {
					// background: url(../../static/icon/mico_8.png)left center no-repeat;
					background-size: 32rpx 34rpx;
				}

				.item:nth-child(9) {
					// background: url(../../static/icon/mico_9.png)left center no-repeat;
					background-size: 32rpx 34rpx;
				}
			}

		}

		.loadmore {
			margin: 30rpx auto;
		}
	}

	.content {
		padding: 20rpx 10rpx;

		.title {
			font-size: 36rpx;
			font-weight: 600;
		}

		.forms {
			margin: 10rpx;

			.lable {
				font-size: 26rpx;
				margin: 10rpx 0;
			}
		}

		.bottm {
			width: 500rpx;
			height: 80rpx;
			background: #EF3C37;
			border-color: #EF3C37;
			box-shadow: 0px 1px 3px 0px #F69C9A;
			font-size: 36rpx;
			font-weight: 400;
			color: #FFFFFF;
			letter-spacing: 0.5px;
			margin-bottom: 10px;
			border-radius: 10rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			position: fixed;
			bottom: 30rpx;
			margin-left: -250rpx;
			left: 50%;
		}

	}
</style>
